Screen Wake Lock API: Forhindre skjermdvale i webapplikasjoner

Screen Wake Lock API er et web-API som lar webapplikasjoner forhindre at enheter dimmer eller låser skjermen. Dette er spesielt nyttig for applikasjoner der kontinuerlig synlighet av skjermen er essensielt, for eksempel medieavspillere, navigasjonsapper og applikasjoner som krever brukerinteraksjon over lengre perioder.

Hvorfor er Screen Wake Lock viktig?

I dagens verden forventer brukere sømløse opplevelser. En enhet som automatisk dimmer eller låser skjermen kan forstyrre disse opplevelsene, spesielt når brukere er aktivt engasjert med en webapplikasjon. Tenk på disse scenariene:

• Videoavspilling: Se for deg å se en film eller følge en matlagingsveiledning, og skjermen dimmer konstant, og tvinger deg til å trykke på skjermen for å holde den i gang. Dette er en frustrerende opplevelse.
• Navigasjonsapper: Mens du kjører og bruker en navigasjonsapp, må skjermen være på for å gi kontinuerlige veibeskrivelser. En dimmende eller låst skjerm kan føre til glipp av svinger og potensielle sikkerhetsrisikoer.
• Presentasjonsapper: Å presentere lysbilder eller vise viktig informasjon krever at skjermen forblir aktiv under hele presentasjonen.
• Spillapplikasjoner: Mange spill trenger uavbrutt synlighet av skjermen for spilling. Skjermdvale kan forstyrre spillopplevelsen.
• Online Whiteboards: Å samarbeide på et online whiteboard krever at skjermen forblir våken slik at brukere ikke trenger å gjentatte ganger trykke for å engasjere seg på nytt.

Screen Wake Lock API gir en løsning på disse problemene, og lar webapplikasjoner kontrollere skjermens på/av-tilstand og gi en mer sømløs og brukervennlig opplevelse.

Nettleserstøtte

Fra slutten av 2024 har Screen Wake Lock API solid støtte i alle store nettlesere. Det er imidlertid alltid avgjørende å sjekke den nyeste nettleserkompatibilitetsinformasjonen på ressurser som Mozilla Developer Network (MDN) og Can I use for å sikre optimal kompatibilitet på tvers av nettlesere. Nettleserstøtte kan variere basert på nettleserversjon og operativsystem.

Bruke Screen Wake Lock API

Screen Wake Lock API er relativt enkelt å bruke. Her er en oversikt over de viktigste trinnene:

1. Sjekk for API-støtte

Før du prøver å bruke API-et, er det viktig å sjekke om brukerens nettleser støtter det. Dette forhindrer feil i nettlesere som ikke implementerer API-et.

            if ('wakeLock' in navigator) {
  // Screen Wake Lock API støttes
} else {
  // Screen Wake Lock API støttes ikke
  console.log('Screen Wake Lock API støttes ikke av denne nettleseren.');
}

            

              
                Copy
              
            
          

2. Be om en Wake Lock

For å be om en wake lock, bruk metoden navigator.wakeLock.request(). Denne metoden returnerer et Promise som løser med et WakeLockSentinel-objekt hvis forespørselen lykkes. WakeLockSentinel-objektet representerer den aktive wake lock.

            let wakeLock = null;

const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Screen wake lock aktiv!');

    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock ble frigitt');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Kall denne funksjonen for å aktivere wake lock
requestWakeLock();

            

              
                Copy
              
            
          

I dette eksempelet prøver funksjonen requestWakeLock() å skaffe en skjerm wake lock. Argumentet 'screen' spesifiserer at vi vil forhindre at skjermen dimmer eller låses. Hvis forespørselen lykkes, logges en melding til konsollen. Koden inkluderer også en feilhåndterer for å fange eventuelle unntak som kan oppstå under wake lock-forespørselen. Kritisk sett legger koden til en hendelseslytter for å lytte til "release"-hendelsen som indikerer når Wake Lock ikke lenger er aktiv. Dette kan skje hvis brukeren eksplisitt har frigitt låsen eller hvis systemet har gjenvunnet den på grunn av strømsparingsforanstaltninger.

3. Frigjør Wake Lock

Det er avgjørende å frigjøre wake lock når den ikke lenger er nødvendig. Unnlatelse av å gjøre det kan tømme enhetens batteri og påvirke brukeropplevelsen negativt. For å frigjøre wake lock, kall metoden release() på WakeLockSentinel-objektet.

            const releaseWakeLock = async () => {
  if (wakeLock) {
    await wakeLock.release();
    wakeLock = null;
    console.log('Screen wake lock frigitt!');
  }
};

// Kall denne funksjonen for å frigjøre wake lock
releaseWakeLock();

            

              
                Copy
              
            
          

Denne funksjonen frigjør wake lock på en sikker måte og setter wakeLock-variabelen til null. Det er viktig å sikre at wakeLock-variabelen er riktig administrert for å unngå feil når du frigjør låsen.

4. Håndtering av Wake Lock Release-hendelser

Systemet kan frigjøre wake lock av ulike årsaker, for eksempel brukerinaktivitet eller lavt batterinivå. Det er viktig å lytte etter hendelsen release på WakeLockSentinel-objektet for å håndtere disse situasjonene på en elegant måte. Dette lar deg be om wake lock på nytt eller utføre andre passende handlinger.

            wakeLock.addEventListener('release', () => {
  console.log('Screen Wake Lock ble frigitt');
  // Prøv å be om wake lock på nytt
  // eller utfør andre passende handlinger
  requestWakeLock(); // For eksempel å be om wakelock på nytt
});

            

              
                Copy
              
            
          

Dette eksempelet viser hvordan du kan lytte etter release-hendelsen og potensielt be om wake lock på nytt. Den faktiske implementeringen vil avhenge av de spesifikke kravene til applikasjonen din.

Beste praksis og hensyn

Mens Screen Wake Lock API er et kraftig verktøy, er det viktig å bruke det ansvarlig og vurdere følgende beste praksis:

• Be om Wake Locks bare når det er nødvendig: Unngå å skaffe wake locks unødvendig, da de kan tømme enhetens batteri. Be bare om en wake lock når kontinuerlig synlighet av skjermen er virkelig essensielt for brukeropplevelsen.
• Frigjør Wake Locks raskt: Frigjør wake lock så snart den ikke lenger er nødvendig. Dette bidrar til å spare batteristrøm og forhindre unødvendig forbruk.
• Håndter Release-hendelser på en elegant måte: Vær forberedt på at systemet frigjør wake lock uventet. Lytt etter release-hendelsen og utfør passende handlinger, for eksempel å be om wake lock på nytt eller informere brukeren.
• Gi brukerkontroller: Vurder å gi brukere kontroller for å aktivere eller deaktivere wake lock-funksjonen. Dette gir brukere mer kontroll over enhetens strømforbruk og lar dem tilpasse applikasjonens atferd. For eksempel kan en medieavspiller ha en "Hold skjermen på"-veksling.
• Vurder batterilevetiden: Vær oppmerksom på virkningen på batterilevetiden. Å kontinuerlig holde skjermen på kan redusere batterilevetiden betydelig, spesielt på mobile enheter. Informer brukere om den potensielle virkningen og gi alternativer for å redusere den.
• Brukertillatelse: Mens selve API-et ikke direkte ber om brukertillatelse, er det god praksis å varsle brukeren om at applikasjonen forhindrer skjermen i å sove, og tillate dem å deaktivere denne oppførselen.
• Fallback-mekanisme: For nettlesere som ikke støtter API-et, bør du vurdere å implementere en fallback-mekanisme. Dette kan innebære å bruke JavaScript til å periodisk sende dummy-hendelser til skjermen for å forhindre at den dimmer eller låser seg. Vær imidlertid oppmerksom på at denne tilnærmingen kan være mindre pålitelig og mer ressurskrevende enn å bruke Screen Wake Lock API.
• Testing: Test applikasjonen grundig på forskjellige enheter og nettlesere for å sikre at Screen Wake Lock API fungerer som forventet. Vær oppmerksom på batteriforbruk og brukeropplevelse.
• Tilgjengelighet: Vær oppmerksom på at det å alltid holde skjermen på kan være problematisk for noen brukere. Å tilby måter å deaktivere skjermens wake lock gjør applikasjonen din mer tilgjengelig.

Eksempler fra den virkelige verden

Her er noen eksempler fra den virkelige verden på hvordan Screen Wake Lock API kan brukes i forskjellige applikasjoner:

• Medieavspillere: En videostrømmeapp kan bruke Screen Wake Lock API for å forhindre at skjermen dimmer under avspilling, og gir en sømløs visningsopplevelse.
• Navigasjonsapper: En navigasjonsapp kan bruke API-et for å holde skjermen på mens brukeren kjører, og sikre at veibeskrivelser alltid er synlige.
• Presentasjonsapper: En presentasjonsapp kan bruke API-et for å forhindre at skjermen dimmer under en presentasjon, og sikre at publikum alltid kan se lysbildene.
• Treningsapper: En treningsapp som sporer en treningsøkt kan holde skjermen på slik at brukere raskt kan se målinger uten å måtte låse opp enheten.
• Oppskriftsapper: En oppskriftsapp kan bruke API-et for å holde skjermen på mens brukeren følger en oppskrift, og forhindre at skjermen dimmer mens brukeren lager mat.
• Kioskapplikasjoner: Kioskapplikasjoner drar nytte av denne funksjonen. For eksempel kan selvbetjeningskiosker på flyplasser eller restauranter bruke Screen Wake Lock API for å sikre at skjermen forblir aktiv og responsiv på brukerinteraksjoner.
• Telemedisinapplikasjoner: Under virtuelle legeavtaler, spesielt de som krever observasjon, kan Screen Wake Lock API brukes for å sikre at skjermen forblir på under hele konsultasjonen.

Kodeeksempel: Medieavspiller med Screen Wake Lock

Dette eksempelet demonstrerer hvordan du implementerer Screen Wake Lock API i en enkel medieavspillerapplikasjon.

            
<!DOCTYPE html>
<html>
<head>
  <title>Medieavspiller med Screen Wake Lock</title>
</head>
<body>
  <video id="myVideo" width="640" height="360" controls>
    <source src="your-video.mp4" type="video/mp4">
    Din nettleser støtter ikke videomerket.
  </video>

  <button id="wakeLockBtn">Aktiver Screen Wake Lock</button>

  <script>
    const video = document.getElementById('myVideo');
    const wakeLockBtn = document.getElementById('wakeLockBtn');
    let wakeLock = null;

    const requestWakeLock = async () => {
      try {
        wakeLock = await navigator.wakeLock.request('screen');
        console.log('Screen wake lock aktiv!');
        wakeLockBtn.textContent = 'Deaktiver Screen Wake Lock';

        wakeLock.addEventListener('release', () => {
          console.log('Screen Wake Lock ble frigitt');
          wakeLockBtn.textContent = 'Aktiver Screen Wake Lock';
        });

      } catch (err) {
        console.error(`${err.name}, ${err.message}`);
      }
    };

    const releaseWakeLock = async () => {
      if (wakeLock) {
        await wakeLock.release();
        wakeLock = null;
        console.log('Screen wake lock frigitt!');
        wakeLockBtn.textContent = 'Aktiver Screen Wake Lock';
      }
    };

    wakeLockBtn.addEventListener('click', () => {
      if (wakeLock) {
        releaseWakeLock();
      } else {
        requestWakeLock();
      }
    });

    // Valgfritt: Be automatisk om wake lock når videoen begynner å spilles av
    video.addEventListener('play', () => {
        if(!wakeLock){
            requestWakeLock();
        }
    });

  </script>
</body>
</html>

            

              
                Copy
              
            
          

Denne koden oppretter en enkel medieavspiller med en knapp for å aktivere eller deaktivere skjermens wake lock. Når knappen klikkes, ber koden enten om en ny wake lock eller frigjør den eksisterende. Knappeteksten oppdateres for å gjenspeile gjeldende tilstand av wake lock. Dette eksempelet inkluderer også en valgfri hendelseslytter som automatisk ber om wake lock når videoen begynner å spilles av. Merk: Erstatt your-video.mp4 med den faktiske banen til videofilen din.

Sikkerhetshensyn

Screen Wake Lock API er designet med sikkerhet i tankene. Nettlesere implementerer forskjellige sikkerhetstiltak for å forhindre misbruk av API-et. For eksempel kan nettlesere begrense varigheten som en wake lock kan holdes eller kreve brukerinteraksjon før de gir en wake lock. Følg alltid beste praksis som er skissert tidligere i denne artikkelen for å sikre at du bruker API-et ansvarlig og etisk.

Alternativer til Screen Wake Lock API

Før Screen Wake Lock API, brukte utviklere ofte "hacks" for å forhindre skjermdvale. Disse metodene er generelt upålitelige og anbefales ikke.

• No-Op Video-element: Setter inn et lite, stille videoelement på siden og spiller det kontinuerlig. Dette lurer systemet til å tro at media spilles av, og forhindrer dermed dvale. Dette er ekstremt ressurskrevende.
• Dummy AJAX-forespørsler: Sender periodisk AJAX-forespørsler til serveren for å holde enheten "aktiv". Dette er en dårlig erstatning, da den er nettverksintensiv og upålitelig.

Disse metodene anbefales ikke, da de er upålitelige og kan påvirke ytelsen og batterilevetiden negativt. Screen Wake Lock API er den anbefalte løsningen for å forhindre skjermdvale i webapplikasjoner.

Konklusjon

Screen Wake Lock API er et verdifullt verktøy for webutviklere som ønsker å skape sømløse og engasjerende brukeropplevelser. Ved å forhindre at enheter dimmer eller låser skjermen, kan du sikre at applikasjonene dine forblir synlige og responsive, selv under lengre perioder med inaktivitet. Husk å bruke API-et ansvarlig og følg den beste praksisen som er skissert i denne artikkelen for å unngå å tømme enhetens batteri og påvirke brukeropplevelsen negativt. Etter hvert som API-et får bredere bruk, vil det utvilsomt bli en viktig del av webutviklingsverktøysettet. Omfavn kraften i Screen Wake Lock API for å heve webapplikasjonene dine og gi en mer herlig opplevelse for brukerne dine over hele verden.